<template>
	<view class="itemView" @click="toDetails">
		<view class="item_card_image">
			<image mode="widthFix" lazy-load="true" v-if="item.card_image" :src="item.card_image" />
			<image v-else src="../../static/img_home_default.png" />
		</view>

		<view class="item_content" v-if="item.item_id">
			<view class="item_name">
				<text>{{ item.title }}</text>
				<text>{{ item.description }}</text>
			</view>
			<view class="item_user">
				<image src="../../static/ic_analyse_default.png" />
				<text>{{ item.publisher }}</text>
				<image src="../../static/ic_home_agree.png" />
				<text>{{ item.like_ct }}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "EatItem",
		props: ["item"],
		data() {
			return {

			};
		},
		methods: {
			toDetails: function() {
				if (this.item.item_id) {
					uni.navigateTo({
						url: '../../subpkg/EatDetail/EatDetail?id=' + this.item.item_id
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.itemView {
		.item_card_image {}

		.item_content {
			padding: 4rpx;
			background: white;

			.item_name {
				font-size: 14px;
				display: flex;
				flex-direction: column;
				text-align: left;
				padding: 5rpx 0;
				border-bottom: 1px solid #ededed;

				text {
					&:nth-of-type(1) {
						font-weight: bold;
					}

					&:nth-of-type(2) {
						font-size: 12px;
					}
				}
			}

			.item_user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10px 0;
				font-size: 12px;

				image {
					&:nth-of-type(1) {
						border-radius: 50px;
						width: 25px;
						height: 25px;
					}

					&:nth-of-type(2) {
						width: 20px;
						height: 20px;
					}
				}

				text {
					color: #999999;

					&:nth-of-type(1) {
						flex: 1;
						text-align: left;
						padding: 0 10px;
					}
				}
			}
		}
	}
</style>
